본문으로 건너뛰기

useState, useRef, useEffect 다시보기

React에서 useState, useRef, useEffect는 가장 기본적이면서도 강력한 훅입니다. 이 훅들을 잘 활용하면 상태 관리와 생명 주기 제어를 효율적으로 할 수 있습니다. 이 글에서는 각각의 훅을 간단한 예제와 함께 설명하고, 주의해야 할 점들을 짚어보겠습니다.

useState: 상태 관리​

useState는 컴포넌트의 상태를 관리하는 훅입니다. 상태는 컴포넌트 내에서 값이 변할 수 있는 데이터를 의미합니다.

사용 예제​

import React, { useState } from 'react';

function Counter() {
  // count라는 상태 변수와 setCount라는 상태 변경 함수를 선언
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

export default Counter;

핵심 개념​

  • 초기값 설정: useState(0)은 초기값을 0으로 설정합니다.
  • 상태 변경 함수: setCount를 통해 count 값을 업데이트할 수 있습니다.
  • 주의할 점: 상태 변경 함수는 비동기적으로 동작하므로 상태를 업데이트할 때 이전 상태를 참조해야 할 경우에는 함수형 업데이트를 사용하는 것이 좋습니다.
<button onClick={() => setCount(prevCount => prevCount + 1)}>증가</button>

useRef: DOM 접근 및 변수 저장​

useRef는 DOM 요소에 접근하거나, 컴포넌트의 생애 동안 유지되어야 하는 값을 저장할 때 사용합니다.

사용 예제​

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>입력창 포커스</button>
    </div>
  );
}

export default TextInput;

핵심 개념​

  • DOM 접근: inputRef.current를 통해 DOM 요소에 접근할 수 있습니다.
  • 변수 저장: 컴포넌트가 리렌더링되어도 useRef를 통해 저장한 값은 그대로 유지됩니다.
  • 주의할 점: useRef로 저장한 값이 변경되어도 컴포넌트는 리렌더링되지 않습니다.

useEffect: 생명 주기 제어​

useEffect는 컴포넌트가 렌더링될 때, 특정 작업을 수행할 수 있도록 해줍니다. 마운트, 언마운트, 업데이트 시 모두 사용할 수 있습니다.

사용 예제​

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>타이머: {count}초</div>;
}

export default Timer;

핵심 개념​

  • 의존성 배열: 두 번째 인자인 빈 배열 []은 컴포넌트가 처음 마운트될 때만 이펙트를 실행합니다.
  • 클린업 함수: 이펙트 내에서 반환하는 함수는 컴포넌트가 언마운트되거나 다음 이펙트가 실행되기 전에 실행됩니다.
  • 주의할 점: 의존성 배열을 잘못 설정하면 불필요한 리렌더링이나 클린업 문제가 발생할 수 있습니다.

더 알아보기​

  • 상태 관리의 중요성: 상태를 관리하는 다양한 방법들과 그 중요성에 대해 더 알아보세요.
  • Ref와 DOM: Ref를 사용하여 DOM 요소에 접근하는 다양한 사례를 확인해보세요.
  • React 생명 주기: 컴포넌트의 생명 주기를 이해하고 이를 활용하는 방법에 대해 학습해보세요.

내용 요약​

useState, useRef, useEffect는 React에서 상태 관리와 생명 주기 제어에 중요한 역할을 합니다. 각각의 훅은 상태 변수 선언, DOM 접근, 컴포넌트 생명 주기 제어 등 다양한 기능을 제공합니다. 이를 적절히 사용하면 효율적인 컴포넌트를 만들 수 있습니다.